<template>
  <div class="p-d">
    <div class="b-f p-l p-r p-t">
      <SearchComp :searchData="searchData" :searchForm="searchForm" :searchAction="searchAction"></SearchComp>
    </div>
    <div class="m-t b-p-f">
      <div class="p-b">
        <el-button type="primary" @click="addRole" size="mini">新建角色</el-button>
      </div>
      <TableCompEle :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="false" :isIndex="true" :isShowPage="true"
        :queryParams="queryParams"></TableCompEle>
    </div>
    <RoleIndex ref="roleIndex" />
    <RoleDialog ref="roleRef" />
    <RoleMenuDialog ref="roleMenuRef" />
  </div>
</template>

<script>
import RoleIndex from "./roleIndex.vue";
import RoleDialog from "./roleDialog";
import RoleMenuDialog from "./roleMenuDialog";
import { getRoleList, deleteRole } from "@/api/role.js";
import Mixins from "./mixins";
export default {
  mixins: [Mixins],
  components: {
    RoleIndex,
    RoleDialog,
    RoleMenuDialog,
  },
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      searchForm: {
        changeMethod: () => this.initRole(),
        formData: [
          {
            type: "Input",
            label: "角色名称",
            prop: "",
            clearable: true,
            placeholder: "请输入角色名称",
          },
        ],
      },
      searchAction: [
        {
          label: "查找",
          type: "primary",
          handle: () => {
            this.initRole();
          },
        },
        {
          label: "重置",
          type: "primary",
          plain: true,
          handle: () => {
            this.searchData = {
              roleName: "",
              enableFlag: "",
            };
            this.initRole();
          },
        },
      ],
      searchData: {
        roleName: "",
        enableFlag: "",
      },
      tableData: [],
      tableConfig: [
        {
          prop: "roleName",
          label: "角色名称",
        },
        {
          prop: "roleMemo",
          label: "角色描述",
        },
        // {
        //   prop: "createBy",
        //   label: "创建人",
        // },
        {
          prop: "createTime",
          label: "创建时间",
        },
      ],
      tableAction: {
        align: () => "center",
        width: () => String(110 * 2),
        operations: [
          {
            label: "基本信息",
            isLink: true,
            type: "primary",
            method: (row) => {
              this.info(row);
            },
          },
          {
            label: "权限信息",
            isLink: true,
            type: "primary",
            method: (row) => {
              this.RoleInfo(row);
            },
          },
          {
            label: "删除",
            isLink: true,
            type: "danger",
            method: (row) => {
              this.dels(row);
            },
          },
        ],
      },
    };
  },
  created() {
    this.initRole();
  },
  methods: {
    initRole() {
      let params = {
        currentPage: this.queryParams.currentPage,
        pageSize: this.queryParams.pageSize,
        roleName: this.searchData.roleName,
        enableFlag: this.searchData.enableFlag,
      };
      getRoleList(params).then((res) => {
        this.tableData = res.data.rows;
        this.queryParams.total = res.data.total;
      });
    },
    paginationSize() {
      this.queryParams.currentPage = 1;
      this.initRole();
    },
    dels(row) {
      this.$confirm(`本操作将删除角色，是否继续？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            id: row.id,
          };
          deleteRole(params).then(() => {
            this.paginationSize();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    addRole() {
      this.$refs.roleIndex.show();
    },
    info(row) {
      this.$refs.roleRef.show(row);
    },
    RoleInfo(row) {
      this.$refs.roleMenuRef.show(row);
    },
    reset() {
      this.searchData = {
        roleName: null,
        enableFlag: null,
      };
      this.paginationSize();
    },
  },
};
</script>

<style></style>
